<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security" xmlns:gqgy="http://www.w3.org/1999/xhtml">
<div th:replace="common/common::html"></div>
<head>
    <meta charset="UTF-8">
    <title th:text="#{dictionary.info}"></title>
    <script th:inline="javascript">
        var _gridWidth;
        var _gridHeight;
        //页面自适应
        function resizePageSize(){
            _gridWidth = $(document).width()-12-197;/*  -189 是去掉左侧 菜单的宽度，   -12 是防止浏览器缩小页面 出现滚动条 恢复页面时  折行的问题 */
            _gridHeight = $(document).height()-72 - 44 - 209; /* -32 顶部主菜s单高度，   -90 查询条件高度*/
        }

        $(function () {
            $("body").css("height",$(document).height() + "px");
            loadLeftTree();

            var _columnWidth = _gridWidth/3;

            $("#i18n-table-id").tableEditData({
                width : 1200,
                height:400,
                url:/*[[@{/dictionary/getI18nByDictionaryId}]]*/"",
                colModel : [
                    {display : 'dictId',name : 'dictId',width : 150,align : 'center',hide : 'true'},
                    {display : /*[[#{dictionary.lang}]]*/"",name : 'languageId',width : 400,dom: function(obj,v,_trid,_row){
                            var select = $("#lang-template-id").clone();
                            select.removeClass("fade");
                            select.val(v);
                            select.css("width","43%");
                            select.appendTo(obj);
                            select.attr("readonly",true);
                            if(_row){
                                select.attr("disabled","disabled");
                            }else {
                                select.removeAttr("disabled");
                            }

                            var span = $("<span></span>");
                            span.addClass("read");
                            var vl  =  select.find("option[value='" + v + "']").text();
                            span.text(vl);
                            span.appendTo(obj);
                        }},
                    {display : /*[[#{dictionary.name}]]*/"",name : 'dictName',width : 400},
                    {display : /*[[#{common.operation}]]*/"",name : 'dictName',width : 400,process: function(v,_trid,_row) {
                            var html='<a href="#" class="read" onclick="editTable(\''+ _trid +'\');"> <i class="fa fa-pencil"></i> </a>';
                            html +='<a href="#" class="edit" onclick="saveTable(\''+ _trid +'\');"> <i class="fa fa-floppy-o"></i> </a>';
                            html +='<a href="#" class="read" onclick="deleteTable(\''+ _trid +'\');"> <i class="fa fa-trash-o"></i> </a>';

                            return html;
                        }}
                ]
            })

            // add
            $("#add-btn-id").click(function (event) {
                event.stopPropagation()
                $("#add-dictionary-form-id").resetForm();
                $("#add-dictionary-dialog-id").dialog('open')
            })

            $("#add-dictionary-dialog-id").dialog({
                autoOpen : false,
                width : 400,
                modal : true,
                resizable : false,
                title: /*[[#{dictionary.add.info}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function() {
                            $("#add-dictionary-form-id").submit();
                        }
                    },
                    {
                        text: /*[[#{common.cancel}]]*/'',
                        click: function() {
                            $( this ).dialog( "close" );
                        }
                    }
                ]
            });

            $("#add-dictionary-form-id").ajaxForm({
                dataType: "json",
                success : function(data) {
                    message(data.msg);
                    loadLeftTree();
                    $("#add-dictionary-dialog-id").dialog('close');
                },
                error : function() {
                    message(/*[[#{common.error}]]*/'');
                }
            });


            // 删除
            $("#delete-btn-id").click(function (event) {
                event.stopPropagation();
                var dictId = $("#dictionary-id").text();
                $.ajax({
                    type: 'post',
                    async: false,
                    dataType : 'json',
                    url: /*[[@{deleteDictionaryInfoByDictionaryId}]]*/'',
                    data: [
                        {name:"dictId",value:dictId}
                    ],
                    success: function (data) {
                        message(data.msg);
                        loadLeftTree();
                    },
                    error: function(msg){
                        message(/*[[#{common.error}]]*/'');
                    }
                })
            })
//
//             $("#update-btn-id").click(function (event) {
//                 event.stopPropagation();
//                 var dictId = $("#dictionary-id").text();
//                 $.ajax({
//                     type: 'post',
//                     async: false,
//                     dataType : 'json',
//                     url: /*[[@{updateDictionaryInfo}]]*/'',
//                     data: [
//                         {name:"dictId",value:dictId}
//                     ],
//                     success: function (data) {
//                         message(data.msg);
//                         loadLeftTree();
//                     },
//                     error: function(msg){
//                         message(/*[[#{common.error}]]*/'');
//                     }
//                 })
//             })
            $("#update-btn-id").click(function(event){
                event.stopPropagation();
                var dictId = $("#dictionary-id").text();
                var dictGroup=  $("#group-name").val();
                var dicCode=  $("#data-value").val();
                var description=  $("#dictionary-description").val();
                var dicSort=  $("#dictionary-sort").val();
                $.ajax({
                    type: 'post',
                    async: false,
                    dataType : 'json',
                    url: /*[[@{updateDictionaryInfo}]]*/'',
                    data: [
                        {name:"dictId",value:dictId},
                        {name:"dictGroup",value:dictGroup},
                        {name:"dicCode",value:dicCode},
                        {name:"description",value:description},
                        {name:"dicSort",value:dicSort}
                    ],
                    success: function (data) {
                        message(/*[[#{dictionary.update.success}]]*/'');
                        //queryI18n(menuId);
                        // console.info(data)
                    },
                    error: function(msg){
                        message(/*[[#{common.error}]]*/'');
                    }
                });
            })

        });//ready

        function queryI18n(dictionaryId) {
            $("#i18n-table-id").tableEditOptions({
                extParam:[
                    {name:"dictionaryId",value:dictionaryId}
                ]
            }).tableEditReload();

        }

        function query(dictionaryId) {

            $("#flexigrid-id").flexOptions({
                extParam:[
                    {name:"dictId",value:dictionaryId}
                ]
            }).flexReload();
        }

        var leftSetting = {
            check: {
                enable: false
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            callback:{
                onClick:onClickNode
            }
        };

        function loadLeftTree() {
            $.ajax({
                type: 'post',
                async: false,
                dataType : 'json',
                url: /*[[@{queryLeftTree}]]*/'',
                data: [],
                success: function (data) {
                    // console.info(data)
                    $.fn.zTree.init($("#left-tree-id"), leftSetting, data);
                },
                error: function(msg){
                    message(/*[[#{common.error}]]*/'');
                }
            });
        }

        function onClickNode(event, treeId, treeNode) {
            // console.info( treeNode)
            var dictionaryId = treeNode.id;
            $("#dictionary-id").text(dictionaryId);
            $.ajax({
                type: 'post',
                async: false,
                dataType : 'json',
                url: /*[[@{queryDictionaryListById}]]*/'',
                data: [{name:"dictionaryId",value:dictionaryId}],
                success: function (data) {
                    console.info(data)
                    $("#group-name").val(data.dictGroup);
                    $("#data-value").val(data.dicCode);
                    $("#dictionary-description").val(data.description);
                    $("#dictionary-sort").val(data.dicSort);
                },
                error: function(msg){
                    message(/*[[#{common.error}]]*/'');
                }
            });
            queryI18n(dictionaryId);
        }
        $("ul#tab-ul-menu-id>li").click(function (event) {
            event.stopPropagation()
            $(this).find("a").addClass("active");
        });

        function deleteTable (trId) {
            // var tr =$("#" + trId);
            // console.info(tr);
            var dictId =  $("#" + trId + " input[name='dictId']").val();
            var languageId =  $("#" + trId + " select[name='languageId']").val();
            // console.info(dictId);
            $.ajax({
                type: 'post',
                async: false,
                dataType : 'json',
                url: /*[[@{deleteDictionaryI18nById}]]*/'',
                data: [{name:"dictId",value:dictId},
                    {name:"languageId",value:languageId}],
                success: function (data) {
                    message(data.msg)
                    queryI18n(dictId);
                    // console.info(data)

                },
                error: function(msg){
                    message(/*[[#{common.error}]]*/'');
                }
            });
        }
        function saveTable(trId) {
            var dictId =  $("#dictionary-id").text();
            var languageId =  $("#" + trId + " select[name='languageId']").val();
            var dictName =  $("#" + trId + " input[name='dictName']").val();
            $.ajax({
                type: 'post',
                async: false,
                dataType : 'json',
                url: /*[[@{saveDictionaryI18n}]]*/'',
                data: [
                    {name:"dictId",value:dictId},
                    {name:"languageId",value:languageId},
                    {name:"dictName",value:dictName}
                ],
                success: function (data) {
                    message(data.msg)
                    queryI18n(dictId);
                    // console.info(data)

                },
                error: function(msg){
                    message(/*[[#{common.error}]]*/'');
                }
            });
        }

        function editTable(trId) {
            $("#" + trId).addClass("table-edit-tr");

        }



    </script>
    <style>
        .form-group{
            margin: 0 10px;
        }
        .gqgl-tb-th{
            height: 32px;
            background-color: #b5b5b5;
            background: #f5f5f5;
            border-top: #d4d4d4 1px solid;
            background-color: #fff;
        }
        .gqgl-tb-th > th{
            font-weight: normal;
            cursor: default;
            white-space: nowrap;
            overflow: hidden;
            text-align: center;
            vertical-align: middle !important;
            padding: 0px;
            height: 32px;
            background-color: #b5b5b5;
            box-sizing: border-box;
            color: #FFF;
            font-size: 12px;
        }

        .table-edit-data td{
            text-align: center;
            vertical-align: middle !important;
            padding: 0px;
            height: 32px;
            font-size: 12px;
            background-color: #f5f5f5;
        }
        .table-erow td{
            background-color: #ededed;
        }
        .table-edit-data .read{
            display: inline-block;
            margin-right: 10px;
        }
        .table-edit-data .edit{
            display: none;
        }
        .table-edit-tr .edit{
            display: inline-block;
        }
        .table-edit-tr .read{
            display: none;
        }
    </style>
</head>

<body style="display: flex;flex-direction: row">
<div style="flex-basis: 192px;background-color: #99bbe8;overflow:scroll;">
    <ul id="left-tree-id"  class="ztree" >

    </ul>
</div>

<div style="flex-grow: 1;display: flex;flex-direction: column;background-color: #E6E6FA">
    <nav style="flex-basis: 30px;margin-top: 10px;">
        <a  href="#" id="delete-btn-id" class="navbar-btn">
            <i class="glyphicon glyphicon-trash"></i>
            <span th:text="#{common.delete}"></span>
        </a>
<!--        <a sec:authorize="hasRole('ROLE_gqgy_data_dict_delete')" id="delete-btn-id" href="#" class="navbar-btn">-->
<!--            <i class="glyphicon glyphicon-trash"></i>-->
<!--            <span th:text="#{common.delete}"></span>-->
<!--        </a>-->
        <a href="#" id="add-btn-id" class="navbar-btn">
            <i class="glyphicon glyphicon-plus-sign"></i>
            <span th:text="#{common.add}"></span>
        </a>
        <a href="#" id="update-btn-id" onclick="updatetable" class="navbar-btn">
            <i class="glyphicon glyphicon-floppy-disk"></i>
            <span th:text="#{common.modify}"></span>
        </a>

    </nav>
    <article style="flex-basis: 200px;background-color: #E6E6FA">
        <form style="display: grid;grid-template-columns: auto auto">
            <div class="form-group">
                <span th:text="#{dictionary.uuid}"></span>
                <span id="dictionary-id" class="form-control"></span>
            </div>
            <div class="form-group">
                <span th:text="#{dictionary.group.name}"></span>
                <input id="group-name" class="form-control" type="text"></input>
            </div>
            <div class="form-group">
                <span th:text="#{dictionary.data.value}"></span>
                <input id="data-value" class="form-control" type="text"></input>
            </div>
            <div class="form-group">
                <span th:text="#{dictionary.description}"></span>
                <input id="dictionary-description" class="form-control" type="text"></input>
            </div>

            <div class="form-group">
                <span th:text="#{dictionary.sort}"></span>
                <input id="dictionary-sort" class="form-control" type="text"></input>
            </div>

        </form>
    </article>
    <div id="add-dictionary-dialog-id" style="display: none">
        <form id="add-dictionary-form-id" th:action="@{addDictionaryInfo}" method="post">
            <!--            <div class="form-group">-->
            <!--                <span th:text="#{dictionary.uuid}"></span>-->
            <!--                <input class="form-control" id="add-dictionary-id" type="text" name="dictId">-->
            <!--            </div>-->
<!--            <div class="form-group">-->
<!--                <span th:text="#{dictionary.parent.id}"></span>-->
<!--                <input class="form-control" id="add-dictionary-parent-id" type="text" name="parentId">-->
<!--            </div>-->
            <div class="form-group">
                <span th:text="#{dictionary.group.name}"></span>
                <input class="form-control" id="add-dictionary-group-name" type="text" name="dictGroup">
            </div>
            <div class="form-group">
                <span th:text="#{dictionary.data.value}"></span>
                <input id="add-dictionary-data-value" class="form-control"  type="text" name="dicCode"></input>
            </div>
            <div class="form-group">
                <span th:text="#{dictionary.description}"></span>
                <input id="add-dictionary-description" class="form-control" type="text" name="description"></input>
            </div>
            <div class="form-group">
                <span th:text="#{dictionary.sort}"></span>
                <input class="form-control" id="add-dictionary-sort" type="text" name="dicSort">
            </div>

        </form>

    </div>

    <article style="flex-grow: 1;margin-top:10px;">
        <ul id="tab-ul-menu-id" class="nav nav-tabs">
            <li tab="tab-i18n-id">
                <a href="#">
                    <i class="fa fa-university"></i>
                    <span th:text="#{common.i18n.name}"></span>

                </a>
            </li>
        </ul>

        <section id="tab-content-id" class="tab-content">
            <article id="tab-i18n-id" class="tab-pane fade in active">
                <select  id="lang-template-id" class="edit fade" name="languageId" gqgy:dicselect="lang.type" ></select>
                <table id="i18n-table-id" class="table-edit-data"></table>
            </article>
        </section>


    </article>

</div>
</body>
</html>